<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>北师香港浸会大学研究生院缴费系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1e40af',
                        secondary: '#3b82f6',
                        accent: '#60a5fa',
                        neutral: '#f1f5f9',
                        'neutral-dark': '#334155',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .animate-spin-slow {
                animation: spin 3s linear infinite;
            }
            .card-shadow {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
            .sharp-corners {
                border-radius: 0.5rem;
            }
            .btn-sharp {
                border-radius: 0.375rem;
            }
            .payment-option-selected {
                border-color: #1e40af;
                background-color: #dbeafe;
            }
            .btn-disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
    <style>
        /* 设置背景图片样式 */
        body {
            background-size: cover;
            background-position: center;
            transition: background-image 1s ease-in-out;
        }
    </style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <nav id="navbar" class="bg-white/80 backdrop-blur-md shadow-sm transition-all duration-300 sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-graduation-cap text-primary text-2xl"></i>
                <span class="text-primary font-bold text-xl">北师香港浸会大学</span>
            </div>
            <div class="hidden md:flex space-x-6">
                <a href="#" class="text-neutral-dark hover:text-primary transition-colors duration-200">首页</a>
                <a href="#" class="text-neutral-dark hover:text-primary transition-colors duration-200">关于我们</a>
                <a href="#" class="text-neutral-dark hover:text-primary transition-colors duration-200">联系我们</a>
            </div>
            <button class="md:hidden text-primary text-xl">
                <i class="fa fa-bars"></i>
            </button>
        </div>
    </nav>

    <!-- 登录页面 -->
    <section id="login-page" class="flex-grow flex items-center justify-center p-4">
        <div class="bg-white rounded-2xl shadow-xl max-w-md w-full overflow-hidden transform transition-all duration-500 hover:shadow-2xl sharp-corners">
            <div class="bg-primary p-6 text-white">
                <h2 class="text-2xl font-bold mb-2">北师港浸大研究生院缴费系统登录</h2>
                <p class="text-blue-100">请输入您的账号和密码登录</p>
            </div>
            <div class="p-6">
                <form id="login-form" class="space-y-4">
                    <div>
                        <label for="username" class="block text-sm font-medium text-gray-700 mb-1">账号</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                                <i class="fa fa-user"></i>
                            </span>
                            <input type="text" id="username" name="username" class="pl-10 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary/20 focus:ring-opacity-50 transition-all duration-200 sharp-corners" placeholder="请输入您的账号" required>
                        </div>
                    </div>
                    <div>
                        <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                                <i class="fa fa-lock"></i>
                            </span>
                            <input type="password" id="password" name="password" class="pl-10 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary/20 focus:ring-opacity-50 transition-all duration-200 sharp-corners" placeholder="请输入您的密码" required>
                        </div>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                            <label for="remember-me" class="ml-2 block text-sm text-gray-700">记住我</label>
                        </div>
                        <a href="#" class="text-sm font-medium text-primary hover:text-primary/80 transition-colors duration-200">重置密码</a>
                    </div>
                    <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-md transition-all duration-200 transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2 shadow-md hover:shadow-lg btn-sharp">
                        登录
                    </button>
                </form>
                <div class="mt-6 text-center">
                    <p class="text-sm text-gray-600">如有问题，请联系 <a href="#" class="text-primary hover:underline">技术支持</a></p>
                </div>
            </div>
        </div>
    </section>

    <!-- 加载动画页面 -->
    <section id="loading-page" class="flex-grow flex flex-col items-center justify-center p-4 hidden">
        <div class="bg-white rounded-2xl shadow-xl max-w-md w-full p-8 text-center transform transition-all duration-500 sharp-corners">
            <div class="mb-6">
                <div class="inline-block">
                    <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4 animate-spin-slow">
                        <i class="fa fa-circle-o-notch text-primary text-2xl"></i>
                    </div>
                </div>
                <h2 class="text-xl font-bold text-neutral-dark mb-2">正在查询录取资格</h2>
                <p class="text-gray-600 mb-6">请稍候，系统正在验证您的录取信息...</p>
            </div>
        </div>
    </section>

    <!-- 缴费页面 -->
    <section id="payment-page" class="flex-grow flex items-center justify-center p-4 hidden">
        <div class="bg-white rounded-2xl shadow-xl max-w-md w-full overflow-hidden transform transition-all duration-500 hover:shadow-2xl sharp-corners">
            <div class="bg-gradient-to-r from-primary to-secondary p-6 text-white">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="text-2xl font-bold mb-1">缴费确认</h2>
                        <p class="text-blue-100">请确认您的缴费信息</p>
                    </div>
                    <div class="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center">
                        <i class="fa fa-credit-card text-white text-xl"></i>
                    </div>
                </div>
            </div>
            <div class="p-6">
                <div class="bg-blue-50 rounded-lg p-4 mb-6 sharp-corners">
                    <div class="flex justify-between items-center mb-4 pb-4 border-b border-blue-100">
                        <span class="text-gray-600">学生姓名</span>
                        <span class="font-medium" id="student-name">白胤民</span>
                    </div>
                    <div class="flex justify-between items-center mb-4 pb-4 border-b border-blue-100">
                        <span class="text-gray-600">录取专业</span>
                        <span class="font-medium" id="major">计算机科学硕士</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">学号</span>
                        <span class="font-medium" id="student-id">s230026002</span>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4 mb-6">
                    <button id="pending-fees-button" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-md transition-all duration-200 transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2 shadow-md hover:shadow-lg btn-sharp">
                        <i class="fa fa-credit-card mr-2"></i> 待缴费用
                    </button>
                    <button id="paid-fees-button" class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-3 px-4 rounded-md transition-all duration-200 transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-gray-500/50 focus:ring-offset-2 shadow-sm hover:shadow-md btn-sharp">
                        <i class="fa fa-check-circle mr-2"></i> 已缴费用查询
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- 待缴费用页面 -->
    <section id="pending-fees-page" class="flex-grow flex items-center justify-center p-4 hidden">
        <div class="bg-white rounded-2xl shadow-xl max-w-md w-full overflow-hidden transform transition-all duration-500 hover:shadow-2xl sharp-corners">
            <div class="bg-gradient-to-r from-primary to-secondary p-6 text-white">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="text-2xl font-bold mb-1">待缴费用</h2>
                        <p class="text-blue-100">请选择要缴纳的费用</p>
                    </div>
                    <button id="back-from-pending" class="text-white hover:text-blue-100">
                        <i class="fa fa-arrow-left"></i>
                    </button>
                </div>
            </div>
            <div class="p-6">
                <div class="bg-blue-50 rounded-lg p-4 mb-6 sharp-corners">
                    <div class="flex justify-between items-center mb-4 pb-4 border-b border-blue-100">
                        <span class="text-gray-600">学生姓名</span>
                        <span class="font-medium">白胤民</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">学号</span>
                        <span class="font-medium">s230026002</span>
                    </div>
                </div>

                <div class="space-y-4 mb-6">
                    <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow duration-200 sharp-corners">
                        <div class="flex justify-between items-center mb-2">
                            <span class="font-medium">2026秋季入学留位费</span>
                            <span class="font-bold text-indigo-600">¥35,000.00</span>
                        </div>
                        <div class="text-sm text-gray-500 mb-3">
                            <span>缴费截止日期: 2025年07月08日</span>
                        </div>
                        <button class="pay-now-button w-full bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-md transition-all duration-200 transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2 shadow-sm hover:shadow-md btn-sharp" data-fee-type="2026秋季入学留位费" data-amount="35000.00">
                            缴纳
                        </button>
                    </div>

                    <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow duration-200 sharp-corners">
                        <div class="flex justify-between items-center mb-2">
                            <span class="font-medium">2027春季入学留位费</span>
                            <span class="font-bold text-indigo-600">¥35,000.00</span>
                        </div>
                        <div class="text-sm text-gray-500 mb-3">
                            <span>缴费截止日期: 2025年09月01日</span>
                        </div>
                        <button class="pay-now-button w-full bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-md transition-all duration-200 transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2 shadow-sm hover:shadow-md btn-sharp" data-fee-type="2027春季入学留位费" data-amount="35000.00">
                            缴纳
                        </button>
                    </div>

                    <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow duration-200 sharp-corners">
                        <div class="flex justify-between items-center mb-2">
                            <span class="font-medium">2027秋季入学留位费</span>
                            <span class="font-bold text-indigo-600">¥99,999.00</span>
                        </div>
                        <div class="text-sm text-gray-500 mb-3">
                            <!-- 修改截止日期为 N/A -->
                            <span>缴费截止日期: N/A</span>
                        </div>
                        <button class="w-full bg-gray-300 text-gray-500 font-medium py-2 px-4 rounded-md transition-all duration-200 transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-gray-500/50 focus:ring-offset-2 shadow-sm hover:shadow-md btn-sharp btn-disabled cursor-not-allowed" disabled>
                            未开放
                        </button>
                    </div>
                </div>

                <div class="text-red-500 text-sm text-center mb-6">
                    <i class="fa fa-exclamation-circle mr-1"></i> 不要同时缴纳两项留位费！
                </div>

                <div class="flex justify-between items-center text-sm text-gray-500">
                    <button class="text-gray-400 hover:text-gray-600 transition-colors duration-200">
                        <i class="fa fa-angle-left mr-1"></i> 上一页
                    </button>
                    <span>1/1页</span>
                    <button class="text-gray-400 hover:text-gray-600 transition-colors duration-200">
                        下一页 <i class="fa fa-angle-right ml-1"></i>
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- 已缴费用页面 -->
    <section id="paid-fees-page" class="flex-grow flex items-center justify-center p-4 hidden">
        <div class="bg-white rounded-2xl shadow-xl max-w-md w-full overflow-hidden transform transition-all duration-500 hover:shadow-2xl sharp-corners">
            <div class="bg-gradient-to-r from-primary to-secondary p-6 text-white">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="text-2xl font-bold mb-1">已缴费用</h2>
                        <p class="text-blue-100">您的已缴费用信息</p>
                    </div>
                    <button id="back-from-paid" class="text-white hover:text-blue-100">
                        <i class="fa fa-arrow-left"></i>
                    </button>
                </div>
            </div>
            <div class="p-6">
                <div class="bg-blue-50 rounded-lg p-4 mb-6 sharp-corners">
                    <div class="flex justify-between items-center mb-4 pb-4 border-b border-blue-100">
                        <span class="text-gray-600">学生姓名</span>
                        <span class="font-medium">白胤民</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">学号</span>
                        <span class="font-medium">s230026002</span>
                    </div>
                </div>

                <div class="bg-white border border-gray-200 rounded-lg p-6 text-center shadow-sm hover:shadow-md transition-shadow duration-200 sharp-corners">
                    <div class="mb-4">
                        <i class="fa fa-file-text-o text-gray-400 text-5xl"></i>
                    </div>
                    <h3 class="text-lg font-medium text-gray-800 mb-2">暂无已缴费用记录</h3>
                    <p class="text-gray-500 text-sm">您还没有缴纳任何费用</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 支付方式选择页面 -->
    <section id="payment-method-page" class="flex-grow flex items-center justify-center p-4 hidden">
        <div class="bg-white rounded-2xl shadow-xl max-w-md w-full overflow-hidden transform transition-all duration-500 hover:shadow-2xl sharp-corners">
            <div class="bg-gradient-to-r from-primary to-secondary p-6 text-white">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="text-2xl font-bold mb-1">选择支付方式</h2>
                        <p class="text-blue-100">请选择您的支付方式</p>
                    </div>
                    <button id="back-from-payment-method" class="text-white hover:text-blue-100">
                        <i class="fa fa-arrow-left"></i>
                    </button>
                </div>
            </div>
            <div class="p-6">
                <div class="bg-blue-50 rounded-lg p-4 mb-6 sharp-corners">
                    <div class="flex justify-between items-center mb-2">
                        <span class="text-gray-600">学生姓名</span>
                        <span class="font-medium" id="payment-student-name">白胤民</span>
                    </div>
                    <div class="flex justify-between items-center mb-2">
                        <span class="text-gray-600">学号</span>
                        <span class="font-medium" id="payment-student-id">s230026002</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">费用类型</span>
                        <span class="font-medium" id="payment-fee-type">2026秋季入学留位费</span>
                    </div>
                </div>

                <div class="bg-indigo-50 rounded-lg p-4 mb-6 sharp-corners">
                    <div class="flex justify-between items-center mb-2">
                        <span class="text-gray-600">金额</span>
                        <span class="font-bold text-xl text-indigo-600" id="payment-amount">¥35,000.00</span>
                    </div>
                </div>

                <div class="space-y-3 mb-6">
                    <div id="credit-card-option" class="border-2 border-gray-200 rounded-lg p-4 cursor-pointer hover:border-primary transition-colors duration-200 sharp-corners">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                                <i class="fa fa-credit-card text-blue-600"></i>
                            </div>
                            <div class="flex-grow">
                                <h3 class="font-medium">银行转账</h3>
                                <p class="text-sm text-gray-500">支持Visa、MasterCard、UnionPay等信用卡</p>
                            </div>
                            <div id="credit-card-check" class="text-primary hidden">
                                <i class="fa fa-check-circle"></i>
                            </div>
                        </div>
                    </div>

                    <div id="wechat-option" class="border-2 border-primary bg-primary/5 rounded-lg p-4 cursor-pointer transition-colors duration-200 sharp-corners">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
                                <i class="fa fa-wechat text-green-600"></i>
                            </div>
                            <div class="flex-grow">
                                <h3 class="font-medium">微信支付</h3>
                                <p class="text-sm text-gray-500">使用微信扫码支付需5%手续费（平台收取）</p>
                            </div>
                            <div id="wechat-check" class="text-primary">
                                <i class="fa fa-check-circle"></i>
                            </div>
                        </div>
                    </div>

                    <div id="bank-option" class="border-2 border-gray-200 rounded-lg p-4 cursor-pointer hover:border-primary transition-colors duration-200 sharp-corners">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
                                <i class="fa fa-university text-indigo-600"></i>
                            </div>
                            <div class="flex-grow">
                                <h3 class="font-medium">银行预存</h3>
                                <p class="text-sm text-gray-500">本校学生使用学校预存账户支付</p>
                            </div>
                            <div id="bank-check" class="text-primary hidden">
                                <i class="fa fa-check-circle"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <button id="confirm-payment-button" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-md transition-all duration-200 transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2 shadow-md hover:shadow-lg btn-sharp">
                    确认支付 ¥35,000.00
                </button>
            </div>
        </div>
    </section>

    <!-- 支付处理中页面 -->
    <section id="payment-processing-page" class="flex-grow flex items-center justify-center p-4 hidden">
        <div class="bg-white rounded-2xl shadow-xl max-w-md w-full p-8 text-center transform transition-all duration-500 sharp-corners">
            <div class="mb-6">
                <div class="inline-block animate-spin-slow">
                    <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                        <i class="fa fa-spinner text-primary text-2xl"></i>
                    </div>
                </div>
                <h2 class="text-xl font-bold text-neutral-dark mb-2">正在处理支付</h2>
                <p class="text-gray-600 mb-2">扣费申请已发出，等待支付成功中</p>
                <p class="text-gray-500 text-sm">支付成功将以邮件形式提示</p>
            </div>
        </div>
    </section>

    <!-- 支付失败模态框 -->
    <div id="failure-modal" class="fixed inset-0 flex items-center justify-center z-50 bg-black/50 backdrop-blur-sm opacity-0 pointer-events-none transition-opacity duration-300">
        <div class="bg-white rounded-xl shadow-2xl max-w-md w-full p-6 transform scale-95 transition-transform duration-300 sharp-corners">
            <div class="text-center">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-100 mb-4">
                    <i class="fa fa-times text-red-500 text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">支付失败</h3>
                <p class="text-gray-600 mb-6">支付过程中出现错误，请检查后重试。</p>
                <button id="close-failure-modal" class="inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2 transition-all duration-200 btn-sharp">
                    重试
                </button>
            </div>
        </div>
    </div>

    <!-- 支付成功模态框 -->
    <div id="success-modal" class="fixed inset-0 flex items-center justify-center z-50 bg-black/50 backdrop-blur-sm opacity-0 pointer-events-none transition-opacity duration-300">
        <div class="bg-white rounded-xl shadow-2xl max-w-md w-full p-6 transform scale-95 transition-transform duration-300 sharp-corners">
            <div class="text-center">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-4">
                    <i class="fa fa-check text-green-500 text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">支付成功!</h3>
                <p class="text-gray-600 mb-6">您的留位费已成功支付，我们已向您的邮箱发送了支付凭证。</p>
                <button id="close-modal" class="inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2 transition-all duration-200 btn-sharp">
                    确定
                </button>
            </div>
        </div>
    </div>

    <script>
        // 页面元素
        const loginPage = document.getElementById('login-page');
        const loadingPage = document.getElementById('loading-page');
        const paymentPage = document.getElementById('payment-page');
        const pendingFeesPage = document.getElementById('pending-fees-page');
        const paidFeesPage = document.getElementById('paid-fees-page');
        const paymentMethodPage = document.getElementById('payment-method-page');
        const paymentProcessingPage = document.getElementById('payment-processing-page');
        const loginForm = document.getElementById('login-form');
        const pendingFeesButton = document.getElementById('pending-fees-button');
        const paidFeesButton = document.getElementById('paid-fees-button');
        const backFromPending = document.getElementById('back-from-pending');
        const backFromPaid = document.getElementById('back-from-paid');
        const payNowButtons = document.querySelectorAll('.pay-now-button');
        const backFromPaymentMethod = document.getElementById('back-from-payment-method');
        const paymentStudentName = document.getElementById('payment-student-name');
        const paymentStudentId = document.getElementById('payment-student-id');
        const paymentFeeType = document.getElementById('payment-fee-type');
        const paymentAmount = document.getElementById('payment-amount');
        const creditCardOption = document.getElementById('credit-card-option');
        const wechatOption = document.getElementById('wechat-option');
        const bankOption = document.getElementById('bank-option');
        const creditCardCheck = document.getElementById('credit-card-check');
        const wechatCheck = document.getElementById('wechat-check');
        const bankCheck = document.getElementById('bank-check');
        const confirmPaymentButton = document.getElementById('confirm-payment-button');
        const successModal = document.getElementById('success-modal');
        const failureModal = document.getElementById('failure-modal');
        const closeModal = document.getElementById('close-modal');
        const closeFailureModal = document.getElementById('close-failure-modal');
        const navbar = document.getElementById('navbar');

        // 当前选中的支付方式
        let selectedPaymentMethod = 'wechat';
        // 支付尝试次数
        let paymentAttempts = 0;

        // 背景图片数组，这里需要替换为实际的图片链接
        const backgroundImages = [
            'images/1.jpg',
            'images/2.jpg',
            'images/3.jpg'
        ];
        let currentImageIndex = 0;

        // 切换背景图片的函数
        function changeBackgroundImage() {
            document.body.style.backgroundImage = `url('${backgroundImages[currentImageIndex]}')`;
            currentImageIndex = (currentImageIndex + 1) % backgroundImages.length;
        }

        // 初始加载时设置背景图片
        changeBackgroundImage();

        // 登录表单提交
        loginForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 无论输入什么都能登录
            // 显示加载页面
            loginPage.classList.add('hidden');
            loadingPage.classList.remove('hidden');
            
            // 切换背景图片
            changeBackgroundImage();

            // 7秒后显示缴费页面
            setTimeout(() => {
                loadingPage.classList.add('hidden');
                paymentPage.classList.remove('hidden');
                // 切换背景图片
                changeBackgroundImage();
            }, 7000); // 7秒
        });

        // 待缴费用按钮点击
        pendingFeesButton.addEventListener('click', function() {
            paymentPage.classList.add('hidden');
            pendingFeesPage.classList.remove('hidden');
            // 切换背景图片
            changeBackgroundImage();
        });

        // 已缴费用按钮点击
        paidFeesButton.addEventListener('click', function() {
            paymentPage.classList.add('hidden');
            paidFeesPage.classList.remove('hidden');
            // 切换背景图片
            changeBackgroundImage();
        });

        // 从待缴费用页面返回
        backFromPending.addEventListener('click', function() {
            pendingFeesPage.classList.add('hidden');
            paymentPage.classList.remove('hidden');
            // 切换背景图片
            changeBackgroundImage();
        });

        // 从已缴费用页面返回
        backFromPaid.addEventListener('click', function() {
            paidFeesPage.classList.add('hidden');
            paymentPage.classList.remove('hidden');
            // 切换背景图片
            changeBackgroundImage();
        });

        // 缴纳按钮点击
        payNowButtons.forEach(button => {
            button.addEventListener('click', function() {
                const feeType = this.getAttribute('data-fee-type');
                const amount = this.getAttribute('data-amount');
                
                // 显示加载页面
                pendingFeesPage.classList.add('hidden');
                loadingPage.classList.remove('hidden');
                // 切换背景图片
                changeBackgroundImage();
                
                // 2秒后显示支付方式页面
                setTimeout(() => {
                    loadingPage.classList.add('hidden');
                    paymentMethodPage.classList.remove('hidden');
                    
                    // 填充支付信息
                    paymentFeeType.textContent = feeType;
                    paymentAmount.textContent = `¥${parseFloat(amount).toLocaleString('zh-CN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
                    // 切换背景图片
                    changeBackgroundImage();
                }, 2000); // 2秒
            });
        });

        // 从支付方式页面返回
        backFromPaymentMethod.addEventListener('click', function() {
            paymentMethodPage.classList.add('hidden');
            pendingFeesPage.classList.remove('hidden');
            // 切换背景图片
            changeBackgroundImage();
        });

        // 选择信用卡支付
        creditCardOption.addEventListener('click', function() {
            // 重置所有选项样式
            resetPaymentOptions();
            
            // 设置当前选项样式
            creditCardOption.classList.add('payment-option-selected');
            creditCardOption.classList.remove('border-gray-200');
            creditCardOption.classList.add('border-primary');
            
            // 显示选中图标
            creditCardCheck.classList.remove('hidden');
            
            // 更新选中状态
            selectedPaymentMethod = 'credit-card';
        });

        // 选择微信支付
        wechatOption.addEventListener('click', function() {
            // 重置所有选项样式
            resetPaymentOptions();
            
            // 设置当前选项样式
            wechatOption.classList.add('payment-option-selected');
            wechatOption.classList.remove('border-gray-200');
            wechatOption.classList.add('border-primary');
            wechatOption.classList.add('bg-primary/5');
            
            // 显示选中图标
            wechatCheck.classList.remove('hidden');
            
            // 更新选中状态
            selectedPaymentMethod = 'wechat';
        });

        // 选择银行预存
        bankOption.addEventListener('click', function() {
            // 重置所有选项样式
            resetPaymentOptions();
            
            // 设置当前选项样式
            bankOption.classList.add('payment-option-selected');
            bankOption.classList.remove('border-gray-200');
            bankOption.classList.add('border-primary');
            
            // 显示选中图标
            bankCheck.classList.remove('hidden');
            
            // 更新选中状态
            selectedPaymentMethod = 'bank';
        });

        // 重置支付选项样式
        function resetPaymentOptions() {
            creditCardOption.classList.remove('payment-option-selected');
            wechatOption.classList.remove('payment-option-selected');
            bankOption.classList.remove('payment-option-selected');
            creditCardOption.classList.add('border-gray-200');
            wechatOption.classList.add('border-gray-200');
            bankOption.classList.add('border-gray-200');
            wechatOption.classList.remove('bg-primary/5');
            creditCardCheck.classList.add('hidden');
            wechatCheck.classList.add('hidden');
            bankCheck.classList.add('hidden');
        }

        // 确认支付按钮点击
        confirmPaymentButton.addEventListener('click', function() {
            // 显示支付处理中页面
            paymentMethodPage.classList.add('hidden');
            paymentProcessingPage.classList.remove('hidden');
            // 切换背景图片
            changeBackgroundImage();
            
            // 增加支付尝试次数
            paymentAttempts++;
            
            // 前两次支付尝试失败，第三次成功
            const timeout = paymentAttempts >= 3 ? 6000 : 12000;
            
            setTimeout(() => {
                paymentProcessingPage.classList.add('hidden');
                
                if (paymentAttempts >= 3) {
                    // 第三次尝试，支付成功
                    successModal.classList.remove('opacity-0', 'pointer-events-none');
                    successModal.querySelector('div').classList.remove('scale-95');
                    successModal.querySelector('div').classList.add('scale-100');
                    // 切换背景图片
                    changeBackgroundImage();
                } else {
                    // 前两次尝试，支付失败
                    failureModal.classList.remove('opacity-0', 'pointer-events-none');
                    failureModal.querySelector('div').classList.remove('scale-95');
                    failureModal.querySelector('div').classList.add('scale-100');
                    // 切换背景图片
                    changeBackgroundImage();
                }
            }, timeout);
        });

        // 关闭失败模态框
        closeFailureModal.addEventListener('click', function() {
            failureModal.classList.add('opacity-0', 'pointer-events-none');
            failureModal.querySelector('div').classList.remove('scale-100');
            failureModal.querySelector('div').classList.add('scale-95');
            
            // 返回支付方式页面
            paymentMethodPage.classList.remove('hidden');
            // 切换背景图片
            changeBackgroundImage();
        });

        // 关闭成功模态框
        closeModal.addEventListener('click', function() {
            successModal.classList.add('opacity-0', 'pointer-events-none');
            successModal.querySelector('div').classList.remove('scale-100');
            successModal.querySelector('div').classList.add('scale-95');
            
            // 重置支付尝试次数
            paymentAttempts = 0;
            
            // 返回缴费页面
            paymentPage.classList.remove('hidden');
            // 切换背景图片
            changeBackgroundImage();
        });

        // 滚动时改变导航栏样式
        window.addEventListener('scroll', function() {
            if (window.scrollY > 10) {
                navbar.classList.add('py-2', 'shadow-md');
                navbar.classList.remove('py-3', 'shadow-sm');
            } else {
                navbar.classList.add('py-3', 'shadow-sm');
                navbar.classList.remove('py-2', 'shadow-md');
            }
        });
    </script>
</body>
</html>
